Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tooltips in collection components #7289

Closed
wants to merge 8 commits into from
Closed

Conversation

snowystinger
Copy link
Member

@snowystinger snowystinger commented Oct 29, 2024

Closes #6800, #7303

Request initially for Tooltips on Tabs, especially when we implement collapse behaviour if we want to go from a long label to icon only before collapsing further into a Picker. This has been requested in Issues before as well.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

# Conflicts:
#	packages/react-aria-components/src/Tooltip.tsx
@snowystinger snowystinger changed the title [WIP]: Tooltips in collection components feat: Tooltips in collection components Jan 21, 2025
@snowystinger snowystinger marked this pull request as ready for review January 21, 2025 06:09
@rspbot
Copy link

rspbot commented Jan 21, 2025

@@ -176,9 +177,16 @@ export function createLeafComponent<P extends object, E extends Element>(type: s
return Result;
}

// TODO fix the override types
Copy link
Member Author

@snowystinger snowystinger Jan 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

something about these overrides isn't quite right

export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement, useChildren?: (props: P) => ReactNode): (props: P & React.RefAttributes<T>) => ReactElement | null;
export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement, useChildren?: (props: P) => ReactNode): (props: P & React.RefAttributes<T>) => ReactElement | null;
export function createBranchComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement, useChildren: (props: P) => ReactNode = useCollectionChildren) {

They complain in TableView and some others that the Element type on the forwardedRef doesn't match (true, but I haven't figured out how to get the generic to work)

@@ -108,7 +108,7 @@ export const Section = /*#__PURE__*/ createBranchComponent('section', <T extends

export interface CollectionBranchProps {
/** The collection of items to render. */
collection: ICollection<Node<unknown>>,
collection?: ICollection<Node<unknown>>,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

opinions on this change? It's kind of breaking as noted in Breadcrumbs

);
}

// TODO: what should we do about TooltipTriggers with a single child that wraps the trigger and the tooltip?
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment says it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't use Tooltip with Tab
2 participants